<script setup lang="ts">
import { ref, reactive, toRef, watchEffect, onMounted } from 'vue'
import axios from "axios";
import router from '@/router';
import { type latestProductObj } from './types'
import MobileDetect from "mobile-detect";

let latestProduct = reactive({
  val: [{
    cover: '',
    title: '',
    integration: 0,
    pid: 1
  },
  {
    cover: '',
    title: '',
    integration: 0,
    pid: 1
  },
  {
    cover: '',
    title: '',
    integration: 0,
    pid: 1
  },
  {
    cover: '',
    title: '',
    integration: 0,
    pid: 1
  }]
} as any)
let brandProduct = reactive({
  val: [{
    cover: '',
    title: '',
    integration: 0,
    brief: '',
    pid: 1
  }]
})
let hotProduct = reactive({
  val: [{
    cover: '',
    title: '',
    integration: 0,
    brief: '',
    pid: 1
  }]
})

let tagButton = ref('newTag')

let md = new MobileDetect(navigator.userAgent);

function click(pid: string, cato: string) {
  router.push(`/detailview?pid=${pid}&cato=${cato}`)
}
window.addEventListener('scroll',function(e){
  // let newTag = this.document.getElementById('newTag')
  // let hotTag = this.document.getElementById('hotTag')
  // let brandTag = this.document.getElementById('brandTag')
  let newTagT = this.document.getElementById('newTag')?.offsetTop
  let hotTagT = this.document.getElementById('hotTag')?.offsetTop
  let brandTagT = this.document.getElementById('brandTag')?.offsetTop
  if(window.scrollY >= (brandTagT-300)){
    tagButton.value = 'brandTag'
  }else if(window.scrollY >= (hotTagT-200)){
    tagButton.value = 'hotTag'
  }else if(window.scrollY >= 0){
    tagButton.value = 'newTag'
  }
})
function tagClick(id: string) {
  tagButton.value = id as any
  let height = document.getElementById(id)?.offsetTop
  height = height as number * 0.86
  window.scrollTo(0, height)
}
axios.get(`/api/product/hot/${md.mobile() ? md.mobile() : md.phone() ? md.phone() : '其他' }`).then((res) => {
  hotProduct.val = res.data.products
  console.log(res.data.products)
}).catch((e) => { console.log(e) })

axios.get('/api/product/brand').then((res) => {
  brandProduct.val = res.data.products
  toRef(brandProduct)
  console.log(res.data.products)
}).catch((e) => { console.log(e) })

axios.get('/api/product/latest').then((res) => {
  latestProduct.val = res.data.products
  console.log(res.data.products)
}).catch((e) => { console.log(e) })


</script>

<template>
  <div class="commodity">
    <div :class="tagButton">
      <div class="newButton" @click="tagClick('newTag')"></div>
      <div class="hotButton" @click="tagClick('hotTag')"></div>
      <div class="brandButton" @click="tagClick('brandTag')"></div>
    </div>
    <div id="newTag" class="tagDetail">
      <div class="tagDetailImgWrap">
        <div class="tagDetailImgItems">
          <div @click="click(latestProduct.val?.[0].pid, 'newProduct')" :id="latestProduct.val?.[0].pid" class="productDetailWrap">
            <img :src="latestProduct.val?.[0].cover" alt="">
            <div class="productInto">
              <h3 class="productIntoTitle">{{ latestProduct.val?.[0].title }}</h3>
              <div class="productIntoJifenWrap">
                <h3 class="productIntoJifennumber">{{ latestProduct.val?.[0].integration }}</h3>
                <h3 class="productIntoJifen">积分</h3>
              </div>
              <div class="getButton">立刻领取</div>
            </div>
          </div>
          <div @click="click(latestProduct.val?.[1].pid, 'newProduct')" class="productDetailWrap">
            <img :src="latestProduct.val?.[1].cover" alt="">
            <div class="productInto">
              <h3 class="productIntoTitle">{{ latestProduct.val?.[1].title }}</h3>
              <div class="productIntoJifenWrap">
                <h3 class="productIntoJifennumber">{{ latestProduct.val?.[1].integration }}</h3>
                <h3 class="productIntoJifen">积分</h3>
              </div>
              <div class="getButton">立刻领取</div>
            </div>
          </div>
        </div>
        <div class="tagDetailImgItems">
          <div @click="click(latestProduct.val?.[2].pid, 'newProduct')" class="productDetailWrap">
            <img :src="latestProduct.val?.[2].cover" alt="">
            <div class="productInto">
              <h3 class="productIntoTitle">{{ latestProduct.val?.[2].title }}</h3>
              <div class="productIntoJifenWrap">
                <h3 class="productIntoJifennumber">{{ latestProduct.val?.[2].integration }}</h3>
                <h3 class="productIntoJifen">积分</h3>
              </div>
              <div class="getButton">立刻领取</div>
            </div>
          </div>
          <div @click="click(latestProduct.val?.[3].pid, 'newProduct')" class="productDetailWrap">
            <img :src="latestProduct.val?.[3].cover" alt="">
            <div class="productInto">
              <h3 class="productIntoTitle">{{ latestProduct.val?.[3].title }}</h3>
              <div class="productIntoJifenWrap">
                <h3 class="productIntoJifennumber">{{ latestProduct.val?.[3].integration }}</h3>
                <h3 class="productIntoJifen">积分</h3>
              </div>
              <div class="getButton">立刻领取</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="hotTag" @click="click(hotProduct.val?.[0].pid, 'hotProduct')" class="hotTagDetailWrap">
      <div class="hotTagWrap">
        <img :src="hotProduct.val?.[0].cover" alt="">
        <div class="hotTagDetail">
          <h3 class="hotProductTitle">{{ hotProduct.val?.[0].title }}</h3>
          <h3 class="hotProductIntroduce">{{ hotProduct.val?.[0].brief }}</h3>
          <div class="hotProductIntoJifenWrap">
            <h3 class="hotProductIntoJifennumber">{{ hotProduct.val?.[0].integration }}</h3>
            <h3 class="hotProductIntoJifen">积分</h3>
          </div>
          <div class="hotGetButton">立刻领取</div>
        </div>
      </div>
    </div>
    <div id="brandTag" @click="click(brandProduct.val?.[0].pid, 'brandProduct')" class="brandTagDetailWrap">
      <div class="brandTagWrap">
        <img :src="brandProduct.val?.[0].cover" alt="">
        <div class="hotTagDetail">
          <div class='hotProductGroup'>
            <h3 class="hotProductTitle">{{ brandProduct.val?.[0].title }}</h3>
            <h3 class="hotProductIntroduce">{{ brandProduct.val?.[0].brief }}</h3>
          </div>
          <div class="hotProductIntoJifenWrap">
            <h3 class="hotProductIntoJifennumber">{{ brandProduct.val?.[0].integration }}</h3>
            <h3 class="hotProductIntoJifen">积分</h3>
          </div>
          <div class="hotGetButton">立刻领取</div>
        </div>
      </div>
    </div>
    <h2>-------下拉到底啦-------</h2>
  </div>
</template>
<style scoped>
.commodity {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: column;
}

h2 {
  color: rgb(147, 32, 255);
  opacity: 0.2;
}

img {
  height: 128px;
}

.newTag {
  height: 130px;
  width: 674px;
  display: flex;
  position: sticky;
  top: 0;
  gap: 80px;
  background-image: url('../assets/编组 8备份.png');
  background-size: contain;
  background-repeat: no-repeat;
  flex-direction: row;
  justify-content: center;
  background-position-x: center;
  background-position-y: 0px;
}

.hotTag {
  height: 130px;
  width: 674px;
  display: flex;
  position: sticky;
  top: 0;
  gap: 80px;
  background-image: url('../assets/编组 8备份 2.png');
  background-size: contain;
  background-repeat: no-repeat;
  flex-direction: row;
  justify-content: center;
  background-position-x: center;
  background-position-y: 0px;
}

.brandTag {
  height: 130px;
  width: 674px;
  display: flex;
  position: sticky;
  top: 0;
  gap: 80px;
  background-image: url('../assets/编组 8备份 3.png');
  background-size: contain;
  background-repeat: no-repeat;
  flex-direction: row;
  justify-content: center;
}

.newButton {
  width: 100px;
}

.hotButton {
  width: 100px;
}

.brandButton {
  width: 100px;
}

.commodityTag button {
  display: block;
  height: 32px;
  width: 96px;
}

.tagDetail {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
}

.tagDetailImgWrap {
  display: flex;
  width: 674px;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-direction: column;
  background-image: url('../assets/上新2.png');
  background-repeat: no-repeat;
  background-size: contain;
  padding-top: 137px;
  gap: 28px;
  padding-bottom: 88px;
  margin-top: 12px;
}

.tagDetailImgWrap img {
  width: 128px;
}

.productDetailWrap {
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  width: 280px;
  height: 185.83px;
  background-color: white;
  border-radius: 14px;
  gap: 32px;
  padding-left: 8px;
  margin-top: 0;
}

.tagDetailImgItems {
  display: flex;
  flex-direction: row;
  gap: 28px;
}

.hotTagWrap {
  display: flex;
  flex-direction: row;
  gap: 10%;
  background-image: url('../assets/热门3.png');
  width: 674px;
  min-height: 400px;
  padding-top: 120px;
  box-sizing: border-box;
  /* padding-bottom: 200px; */
  /* padding-bottom: 100px; */
  background-repeat: no-repeat;
  background-size: contain;
}

.hotTagWrap img {
  /* width: 200px; */
  min-width: 200px;
  max-width: 334px;
  max-height: 250px;
  /* margin-top: 0; */
  height: auto;
}

.hotTagDetailWrap {
  display: flex;
  width: 100%;
  overflow: hidden;
  margin-bottom: 30px;
  justify-content: center;
  align-items: center;
}

.hotTagDetailWrap img {

  margin-left: 39px;
}

.hotTagDetail {
  max-width: 335px;
  max-height: 250px;
  /* width: 200px; */
  /* height: auto; */
}

.brandTagWrap {
  display: flex;
  flex-direction: row;
  gap: 10%;
  overflow: hidden;
  background-image: url('../assets/品牌3.png');
  background-size: contain;
  width: 674px;
  min-height: 400px;
  padding-top: 120px;
  padding-bottom: 200px;
  background-repeat: no-repeat;
  margin-bottom: 100px;
  /* margin-top: -100px; */
}

.brandTagWrap img {
  margin-left: 39px;
  max-height: 250px;
  max-width: 320px;
  width: 200px;
  height: auto;
}

.brandTagDetailWrap {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.getButton {
  background-color: rgb(147, 32, 255);
  width: 92px;
  height: 28px;
  line-height: 28px;
  border-radius: 19px;
  text-align: center;
  color: rgb(255, 255, 255);
  font-family: FZLTZCHK;
  font-size: 15px;
  margin-top: 4px;
  margin-right: 12px;
  margin-left: auto;
}

.productInto {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  gap: 0;
}

h3 {
  margin: 0;
}

.productIntoTitle {
  font-size: 17.5px;
  font-family: PingFang SC;
  font-weight: 400;
  height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.productIntoJifen {
  color: rgb(255, 172, 20);
  font-family: FZLTZCHK;
  font-size: 15px;
  margin-top: 32px;
  margin-left: 8px;
  flex-shrink: 0;
}

.productIntoJifennumber {
  color: rgb(255, 172, 20);
  font-family: FZLTZCHK;
  font-size: 24px;
  margin-top: 23px;
  flex-shrink: 0;
}

.productIntoJifenWrap {
  display: flex;
  margin-left: auto;
  margin-right: 70px;
  max-height: 80px;
  max-width: 30px;
}

.hotProductTitle {
  color: rgb(0, 0, 0);
  max-height: 60px;
  overflow: hidden;
  font-family: PingFang SC;
  font-size: 40px;
  font-weight: 400;
}

.hotProductIntroduce {
  color: rgb(0, 0, 0);
  max-height: 65px;
  overflow: hidden;
  font-family: PingFang SC;
  font-size: 24px;
  font-weight: 100;
}

.hotProductIntoJifenWrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.hotGetButton {
  background-color: rgb(255, 172, 20);
  border-radius: 30.399999618530273px;
  height: 45px;
  width: 147px;
  text-align: center;
  color: rgb(255, 255, 255);
  font-family: FZLTZCHK;
  line-height: 45px;
  margin-top: 4px;
  margin-right: 8px;
  margin-left: auto;
  font-size: 24px;
}

.hotProductIntoJifennumber {
  color: rgb(147, 32, 255);
  font-family: FZLTZCHK;
  font-size: 40px;
  font-weight: undefined;
  line-height: -1;
  letter-spacing: 0px;
  text-align: left;
}

.hotProductIntoJifen {
  color: rgb(147, 32, 255);
  font-family: FZLTZCHK;
  font-size: 26.4px;
  font-weight: undefined;
  line-height: -1;
  letter-spacing: 0px;
  text-align: left;
  margin-top: 12px;
  margin-left: 4px;
  margin-right: 12px;
}
.brandProductGroup{
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
}
</style>